import React from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'
// 创建组件
class App extends React.Component {
  // state在App中，则对state的操作方法最好都在App中
  state = {
    todos: [
      {
        id: "01",
        title: "吃饭",
        done: true,
      },
      {
        id: "02",
        title: "睡觉",
        done: true,
      },
      {
        id: "03",
        title: "打工",
        done: false,
      },
    ]
  }
  addTodo = (newTodo) => {//新增todo
    const tempTodos = this.state.todos;
    tempTodos.unshift(newTodo)
    // console.log("App--------", tempTodos);
    this.setState({ todos: tempTodos });
  }
  updateTodo = (id, newDone) => {//更新todo
    // console.log("App-------", id, newDone);
    const {todos} =this.state;
    const newTodos=todos.map(todo=>{
      if(todo.id===id){return {...todo,done:newDone}}
      else{return todo;}
    })
    this.setState({todos:newTodos})
  }
  deleteTodo=(id)=>{//删除todo
    const {todos} =this.state;
    const newTodo=todos.filter(todoObj=>{
      return todoObj.id!==id;
    });
    this.setState({todos:newTodo});
  }
  // 删除已经完成的任务
  deleteDonedTodo=()=>{
    const {todos}=this.state;
    const newTodo=todos.filter(todoObj=>{
      return todoObj.done==false;
    });
    // console.log("App-deleteDonedTodo",newTodo);
    this.setState({todos:newTodo});
  }
  // 改变所有todo的状态为true
  checkAll=(checked)=>{
    const {todos}=this.state;
    const newTodo=todos.map((todoObj)=>{
      todoObj.done=checked;
      return todoObj;
    });
    // console.log("App-checkAll------",newTodo);
    this.setState({todos:newTodo});
  }
  render() {
    const { todos } = this.state;
    return (
      <div className='todo-container'>
        <div className='todo-wrap'>
          <Header addTodo={this.addTodo} />
          <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}></List>
          <Footer todos={todos} checkAll={this.checkAll} deleteDonedTodo={this.deleteDonedTodo}></Footer>
        </div>
      </div>
    )
  }
}
// 默认暴露
export default App